<template>
  <div class="div">
    <div class="top">
      <p>|</p>
      <span>考勤组管理</span>
    </div>
    <el-divider />
    <div class="da">
      <span>考勤组列表</span>
      <el-button type="warning" plain class="add" @click="Addlist"
        >添加</el-button
      >
    </div>
    <div class="bb">
      <div class="top1">
      <p>搜索</p>
      <el-input
          placeholder="请输入考勤组名称"
          v-model="query.name"
          size="large"
          type="text"
          autocomplete="off"
        />
    </div>
    <div class="fen">
      所属项目
      <el-select
        clearable
        v-model="query.items"
        class="m-2"
        placeholder="Select"
        size="large"
      >
        <el-option
          v-for="item in goods"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      
    </div>
    <el-button type="primary" plain class="sou" @click="obtn">搜索</el-button>
    </div>
    <div class="table">
     
      <el-table :data="datalist.slice((page - 1) * limit, page * limit)"
                        :header-cell-style="{ backgroundColor: 'rgb(242,242,242)' }" border
                        style="width: 98%;height: 250px; margin:auto;margin-top: 20px;font-size: 12px;color: black;text-align: center;">
        <el-table-column prop="id" label="序号" width="100" >
          <template #default="scope">
                                <span>{{ (page - 1) * limit + scope.$index + 1 }}</span>
                            </template>
        </el-table-column>
        <el-table-column prop="name" label="考勤组名称" />
        <el-table-column prop="items" label="所属项目" width="150"/>
        <el-table-column prop="num" label="用户数量" width="100" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="redact(scope.row.id)">编辑</el-button>
            <el-popconfirm
              title="亲，您真的要删除吗?"
              @confirm="deletelist(scope.row.id)"
            >
              <template #reference>
                <el-button>删除</el-button>
              </template>
            </el-popconfirm>
            <el-button text @click="table = true">用户列表</el-button>
            <el-drawer
              v-model="table"
              title="考勤组用户列表"
              direction="btt"
              size="50%"
            >
              <List></List>
            </el-drawer>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="list3">
            <span class="span3">{{ page }}</span>
            <span class="span4">首页</span>
            <el-pagination background @current-change="changepage" v-model:current-page="currentpage"
                        layout="prev, pager, next" :total="30" />
           
            <span class="span5">显示01-03条 共{{ page }}条</span>
          </div>
  </div>
  <Adds v-show="isShowAdd" @hide="hideFn" @updatesuccess="successFn"></Adds>
  <Put v-show="isShowEdit" @hide="hideFn1" :id="editid" @updatesuccess="successFn1"></Put>
</template>

<script setup lang="ts">
import service from '../../utils/service'

import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import List from "./kao/list.vue";
 import Put from "./kao/put.vue";
import Adds from './kao/add.vue'
import { ElDrawer, ElMessageBox } from 'element-plus'
import { any } from "vue-types";
const dialog = ref(false)
const table = ref(false);
const loading = ref(false);
const $router = useRouter();
interface Iplist {
  id: string;
  name: string;
  num: number;
  items: string;
}
const datalist = reactive<Iplist[]>([]);
const goods = reactive<any[]>([]);
const changlist = () => {
  service({
    url: "/lists",
  }).then((res) => {
    datalist.push(...res.data);
  });
};
changlist();
const xiala = () => {
  service({
    url: "/Project",
  }).then((res) => {
    goods.push(...res.data);
  });
};
xiala();

//删除数据
const deletelist = (id: number) => {
  service({
    url: `http://localhost:3000/lists/${id}`,
    method: "delete",
  }).then((res) => {
    location.reload();
  });
};

const query = reactive<{
  name?: string;
  items?: string;
}>({
  name: "",
  items: "",
});
//搜索
const obtn = () => {
  service({
    url: "http://localhost:3000/lists",
    method: "get",
    params:{
      name:query.name,
      items:query.items
    }
  }).then((res) => {
    datalist.length=0
    datalist.push(...res.data)
    console.log(res.data);
    
  });
};

const isShowAdd = ref(false); //控制修改组件的显示和隐藏
const Addlist = () => {
  isShowAdd.value = true;
};
const hideFn = () => {
  isShowAdd.value = false;
};
// 当修改成功后，需要重新发送请求，获取最新数据
const successFn = () => changlist();
// 点击编辑弹出框
const isShowEdit = ref(false); //控制修改组件的显示和隐藏
const editid = ref("");
const  redact= (id: string) => {
  editid.value = id;
  isShowEdit.value = true;
};
const hideFn1 = () => {
  isShowEdit.value = false;
};
// 当修改成功后，需要重新发送请求，获取最新数据
const successFn1 = () => changlist();
//分页
const limit = ref(2)
const page = ref(1)
const currentpage = ref()

const changepage = (value: number) => {
    page.value = value
    currentpage.value = value
    service({
        url: "/lists",
        method: "get",
        params: {
            _page: currentpage.value,
            _limit: 2
        }
    }).then((res) => {
        // tableData.length = 0,
        datalist.push(...res.data)
    })
}

</script>

<style scoped>
.top{
  display: flex;
}
.top p{
  color: #3bb19c;
}
.top span{
  font-weight: 700;
}

.el-divider{
  margin-top: -3px;
}
.da{
  margin-top: 16px;
}
.da span{
  font-weight: 700;
}
.da .add{
  float: right;
}
.bb{
  display: flex;
  margin-top: 10px;
}
.bb .top1{
  display: flex;
}
.bb .top1 .el-input{
  width: 200px;
  height: 40px;
  margin-left: 10px;
}
.bb .top1 p{
  line-height: 40px;
}
.bb .fen{
  margin-left: 20px;
}
.bb .sou{
  margin-left: 20px;
}



.list3 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 15px;
}
.span3 {
  width: 40px;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.988235294117647);
  background: #999999;
  border-radius: 5px;
  text-align: center;
}

.span4 {
  width: 60px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.988235294117647);
  background-color: rgba(153, 153, 153, 1);
  border-radius: 5px;
}

.span5 {
  width: 114px;
  height: 20px;
  font-size: 12px;
  color: rgb(102, 102, 102);
  margin-left: 10px;
}

</style>